<template>
	<view class="layout">
		<!-- 首页导航 -->
		<view class="header">
			<view class="opt active">翻译</view>
			<view class="opt"><navigator url="../collect/collect">收藏</navigator></view>
			<view class="opt"><navigator url="../study/study">学习</navigator></view>
		</view>
		<!-- 学习计划 -->
		<view class="plan">
			<view class="title">今日计划</view>
			<view class="wrap">
				<view class="left">
					<text class="num">20</text>
					<text>待学习</text>
				</view>
				<view class="right">
					<text class="num">0</text>
					<text>待复习</text>
				</view>
			</view>
		</view>
		<!-- 翻译结果 -->
		<view class="result">
			<view class="box">
				<view class="text-1"><text style="color: #ccc;">{{text}} </text></view>
				<view class="text-1">
					<text>{{result.word}}</text>
					<image @click="sound(text)" class="icon" src="../../static/icon-sound.png" mode="widthFix"></image>
				</view>
				<view class="text-2">
					中文词义: {{result.mean_cn}}
				</view>
				<view class="text-2">
					英文词义: {{result.mean_en}}
				</view>
				<view class="text-2">
					音标: {{result.accent}}
				</view>
				<view class="text-2">
					句子: {{result.sentence}}
				</view>
				<view class="text-2">
					翻译句子: {{result.sentence_trans}}
				</view>
				<view class="text-2"></view>
			</view>
		</view>
		<!-- 输入框 -->
		<view class="transform">
			<view class="input">
				<input @confirm="translateFn" v-model="text" class="inp" type="text" placeholder="输入翻译文字">
			</view>
		</view>
		<view class="message">
			<text>英文</text>→<text>中文</text>
		</view>
	</view>
</template>
<script>
import { translateList, translateWord , translateSound} from '../../api/index.js'
export default {
	data() {
		return {
			// 词汇数组
			list: [],
			// 词汇数量
			total: 0,
			// 输入框的值
			text: "",
			// 翻译结果
			result: {}
		}
	},
	onLoad() {
		// 初始化
		this.wordList();
		// 翻译
		this.translateChinese('orange');
	},
	methods: {
			sound(text){
				translateSound(text);
			},
			// 翻译英文为中文
			async translateChinese(text){
				await translateWord(text).then(
					data=>{
						console.log(data)
						if(data){
							this.result = data;
						}
						// else {
						// 	uni.showToast({
						// 		title:"暂无该词汇信息",
						// 		icon:"none"
						// 	})
						// }
						// console.log('1.0')
					}
				).catch(err=>{
					uni.showToast({
						title:"暂无该词汇信息",
						icon:"none"
					})
					// console.log('2.0',err)
				})
			},
		
		   // 获取词汇列表
		   async wordList(){
			   // 从本地获取所有词汇（10927个）
				let str = uni.getStorageSync("WORD_LIST");
				if(str){
					let obj = JSON.parse(str)
					this.list = obj.list;
					this.total = obj.total;
				}
			    else {
					// 把所有词汇（10927个）储存在本地，提升检索速度
					await translateList().then(data => {
						// console.log(data)
						if(data.list){
							this.list = data.list;
							this.total = data.total;
							uni.setStorageSync("WORD_LIST",JSON.stringify(data));
						}
					})
					.catch(err => {
						console.log('-->',err)
					})
				}
				
			},
		   
		   // 按回车或搜索执行的方法
		   async translateFn(){
				let text = this.text;
				if(text){
					console.log(text)
					// 执行翻译
					this.translateChinese(text);
				}
				else {
					uni.showToast({
						title:"输入框不能为空",
						icon:"error"
					})
				}
			}
	}
}
</script>

<style lang="scss">
$activeColor: deepskyblue;

.header {
	height: 100rpx;
	width: 100%;
	padding: 0 30rpx;
	display: flex;
	align-items: center;
	border-bottom: 3rpx solid #f0f0f0;
}

.header .opt {
	margin: 0 20rpx;
}

.header .opt.active {
	color: $activeColor;
}

.plan {
	padding: 20rpx 30rpx;
}

.plan .title {
	height: 80rpx;
	line-height: 80rpx;
	background-color: #f0f0f0;
	padding: 20rpx 20rpx 0;
	box-sizing: border-box;
	border-top-left-radius: 20rpx;
	border-top-right-radius: 20rpx;
	font-weight: bold;
}

.plan .wrap {
	width: 100%;
	height: 160rpx;
	align-items: center;
	display: flex;
	background-color: #f0f0f0;
	padding: 20rpx 20rpx;
	box-sizing: border-box;
	border-bottom-left-radius: 20rpx;
	border-bottom-right-radius: 20rpx;
}

.plan .wrap .left,
.plan .wrap .right {
	flex-basis: 50%;
}

.plan .wrap .num {
	font-size: 80rpx;
	margin-right: 10rpx;
}

.result {
	padding: 20rpx 30rpx;
}

.result .box {
	width: 100%;
	height: 600rpx;
	background-color: #f0f0f0;
	border-radius: 20rpx;
	overflow: scroll;
}

::-webkit-scrollbar {
	display: none;
}

.result .icon {
	width: 40rpx;
	height: 40rpx;
	vertical-align: middle;
	margin-left: 20rpx;
}

.result .text-1,
.result .text-2 {
	padding: 30rpx 20rpx;
}

.result .text-1 {
	border-bottom: 1px solid $activeColor;
}

.result .text-2 {
	padding: 20rpx 20rpx 40rpx;
}

.transform {
	position: fixed;
	left: 0;
	bottom: 90rpx;
	z-index: 1000;
	width: 100%;
	box-sizing: border-box;
}

.transform .input {
	padding: 20rpx 30rpx;
	background-color: white;
}

.transform .inp {
	width: 100%;
	height: 120rpx;
	border: 4rpx solid #ccc;
	box-sizing: border-box;
	padding-left: 20rpx;
	border-radius: 20rpx;
}

.message {
	position: fixed;
	left: 0;
	bottom: 10rpx;
	z-index: 1000;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	height: 80rpx;
	line-height: 80rpx;
	background-color: white;
}
</style>